<template>
    <div>
        <!-- 表头 -->
        <el-page-header @back="goBack" :content="content"> </el-page-header>


        <el-form size="small" ref="form" :model="form" label-width="80px">
            <el-form-item
                label="顺序"
                prop="id"
                :rules="[
                { required: true, message: '顺序不能为空，顺序必须为数字值'},
                { type: 'number', message: '顺序必须为数字值'}
                ]"
                >
                <el-input type="number" v-model.number="form.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                label="用户编号"
                prop="userId"
                :rules="[
                { required: true, message: '用户编号不能为空，用户编号必须为数字值'},
                { type: 'number', message: '用户编号必须为数字值'}
                ]"
                >
                <el-input type="number" v-model.number="form.userId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                label="权限编号"
                prop="roleId"
                :rules="[
                { required: true, message: '权限编号不能为空，权限编号必须为数字值'},
                { type: 'number', message: '权限编号必须为数字值'}
                ]"
                >
            <el-input type="number" v-model.number="form.roleId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <div style="text-align:right">
                <el-button type="primary" @click="submitHandler('form')">提交</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>

import {post} from '@/utils/request'

export default {
    data(){
    return {
      content:"新增UserRole信息",
      form:{}
    }
  },
   methods:{
    // 提交
    submitHandler(Form){
      this.$refs[Form].validate((valid) => {
          if (valid) {
            let url = "http://localhost:8888/UserRole/saveOrUpdate"
            console.log(this.form)
            post(url,this.form).then(resp =>{

            // console.log(resp);
            // 提示
            this.$message({type:"success",message:resp.message})
            // 返回列表页面
            this.goBack();
          })
          } else {
            alert('错误输入');
            return false;
          }
        });
    },
    // 返回
    goBack(){
      this.$router.go(-1)
    }
  },
  created(){
    // 页面加载出来的时候，将路由中的参数拿到，放到this.form 中
    this.form = this.$route.query;
  }
    
}
</script>

<style lang="sass" scoped>



</style>